@charset "utf-8";
.nav{
	margin:0;
	padding:0;
	width:70px;
	height:60px;
	position: absolute;
	left:50%;
	bottom:15px;
	margin-left:0px;
	z-index:99;
	background:url(./images/nav-ground.png) center center no-repeat;
	background-size: cover;
	-webkit-background-size: cover;
	text-align: center;
	font-size:0;
}
.nav-item{
	display:inline-block;
	cursor:pointer;
	width:48px;
	height:48px;
	margin:6px 11px;
	background:url(./images/nav-icons.png) no-repeat;
}
.nav-item-1{
	background-position:0 0;
}
.nav-item-2{
	background-position:0 -50px;
}
.nav-item-3{
	background-position:0 -100px;
}
.nav-item-4{
	background-position:0 -150px;
}
.nav-item-5{
	background-position:0 -200px;
}
.nav-item-6{
	background-position:0 -250px;
}
.nav-item-7{
	background-position:0 -300px;
}
.nav-item-8{
	background-position:0 -350px;
}
.nav-item-1.active{
	background-position:-50px 0;
}
.nav-item-2.active{
	background-position:-50px -50px;
}
.nav-item-3.active{
	background-position:-50px -100px;
}
.nav-item-4.active{
	background-position:-50px -150px;
}
.nav-item-5.active{
	background-position:-50px -200px;
}
.nav-item-6.active{
	background-position:-50px -250px;
}
.nav-item-7.active{
	background-position:-50px -300px;
}
.nav-item-8.active{
	background-position:-50px -350px;
}
.circle{
	position: absolute;
	left:50%;
	top:50%;
	width:382px;
	height:382px;
	background:url(./images/bar-bg.png) center center no-repeat;
	-webkit-transform:translate(-50%,-50%);
	-moz-transform:translate(-50%,-50%);
	-o-transform:translate(-50%,-50%);
	-ms-transform:translate(-50%,-50%);
	transform:translate(-50%,-50%);
	display: none;
}
.circle-item{
	display:block;
	width:68px;
	height:68px;
	position: relative;
	z-index:99;
	border-radius:50%;
	background-color:#ccc;
	position: absolute;
	-webkit-transform-origin:105px -89px;
	-moz-transform-origin:105px -89px;
	-ms-transform-origin:105px -89px;
	-o-transform-origin:105px -89px;
	transform-origin:105px -89px;
}
.circle-item .item-img{
	position: absolute;
	left:0;
	top:0;
	z-index: 99;
	width:68px;
	height:68px;
	background: url(./images/bar-icons.png) no-repeat;
	cursor:pointer;
}
.circle-item .item-menu{
	width:289px;
	height:67px;
	line-height: 67px;
	text-align:center;
	color:#fff;
	font-size: 20px;
	background: url(./images/bar-menu-bg.png) center center no-repeat;
	position: absolute;
	right:0;
	top:0;
	z-index:98;
	display: none;
}
.circle-item.active .item-menu{
	display: block;
}
.circle-item:nth-child(1){
	-webkit-transform:translate(86px,280px) rotate(0deg);
	-moz-transform:translate(86px,280px) rotate(0deg);
	-ms-transform:translate(86px,280px) rotate(0deg);
	-o-transform:translate(86px,280px) rotate(0deg);
	transform:translate(86px,280px) rotate(0deg);
}
.circle-item:nth-child(1) .item-img{
	background-position:0 0;
}
.circle-item:nth-child(1).active .item-img{
	background-position:-80px 0px;
}
.circle-item:nth-child(1) .item-menu{
	text-indent:-20px;
}
.circle-item:nth-child(2){
	-webkit-transform:translate(86px,280px) rotate(60deg);
	-moz-transform:translate(86px,280px) rotate(60deg);
	-ms-transform:translate(86px,280px) rotate(60deg);
	-o-transform:translate(86px,280px) rotate(60deg);
	transform:translate(86px,280px) rotate(60deg);
}
.circle-item:nth-child(2) .item-img{
	background-position:0 -70px;
	-webkit-transform:rotate(-60deg);
	-moz-transform:rotate(-60deg);
	-ms-transform:rotate(-60deg);
	-o-transform:rotate(-60deg);
	transform:rotate(-60deg);
}
.circle-item:nth-child(2).active .item-img{
	background-position:-80px -70px;
}
.circle-item:nth-child(2) .item-menu{
	-webkit-transform:rotate(-60deg);
	-moz-transform:rotate(-60deg);
	-ms-transform:rotate(-60deg);
	-o-transform:rotate(-60deg);
	transform:rotate(-60deg);
	-webkit-transform-origin:255px 34px;
	-moz-transform-origin:255px 34px;
	-ms-transform-origin:255px 34px;
	-o-transform-origin:255px 34px;
	transform-origin:255px 34px;
	text-indent:-20px;
}
.circle-item:nth-child(3){
	-webkit-transform:translate(86px,280px) rotate(120deg);
	-moz-transform:translate(86px,280px) rotate(120deg);
	-ms-transform:translate(86px,280px) rotate(120deg);
	-o-transform:translate(86px,280px) rotate(120deg);
	transform:translate(86px,280px) rotate(120deg);
}
.circle-item:nth-child(3) .item-img{
	background-position:0 -140px;
	-webkit-transform:rotate(-120deg);
	-moz-transform:rotate(-120deg);
	-ms-transform:rotate(-120deg);
	-o-transform:rotate(-120deg);
	transform:rotate(-120deg);
}
.circle-item:nth-child(3).active .item-img{
	background-position:-80px -140px;
}
.circle-item:nth-child(3) .item-menu{
	-webkit-transform:rotate(-120deg);
	-moz-transform:rotate(-120deg);
	-ms-transform:rotate(-120deg);
	-o-transform:rotate(-120deg);
	transform:rotate(-120deg);
	transform-origin:255px 34px;
	text-indent:-20px;
}
.circle-item:nth-child(4){
	-webkit-transform:translate(86px,280px) rotate(180deg);
	-moz-transform:translate(86px,280px) rotate(180deg);
	-ms-transform:translate(86px,280px) rotate(180deg);
	-o-transform:translate(86px,280px) rotate(180deg);
	transform:translate(86px,280px) rotate(180deg);
}
.circle-item:nth-child(4) .item-img{
	background-position:0 -210px;
	-webkit-transform:rotate(-180deg);
	-moz-transform:rotate(-180deg);
	-ms-transform:rotate(-180deg);
	-o-transform:rotate(-180deg);
	transform:rotate(-180deg);
}
.circle-item:nth-child(4).active .item-img{
	background-position:-80px -210px;
}
.circle-item:nth-child(4) .item-menu{
	-webkit-transform:rotate(-180deg);
	-moz-transform:rotate(-180deg);
	-ms-transform:rotate(-180deg);
	-o-transform:rotate(-180deg);
	transform:rotate(-180deg);
	text-indent:20px;
}
.circle-item:nth-child(5){
	-webkit-transform:translate(86px,280px) rotate(240deg);
	-moz-transform:translate(86px,280px) rotate(240deg);
	-ms-transform:translate(86px,280px) rotate(240deg);
	-o-transform:translate(86px,280px) rotate(240deg);
	transform:translate(86px,280px) rotate(240deg);
}
.circle-item:nth-child(5) .item-img{
	background-position:0 -280px;
	-webkit-transform:rotate(-240deg);
	-moz-transform:rotate(-240deg);
	-ms-transform:rotate(-240deg);
	-o-transform:rotate(-240deg);
	transform:rotate(-240deg);
}
.circle-item:nth-child(5).active .item-img{
	background-position:-80px -280px;
}
.circle-item:nth-child(5) .item-menu{
	-webkit-transform:rotate(-240deg) translateX(221px);
	-moz-transform:rotate(-240deg) translateX(221px);
	-ms-transform:rotate(-240deg) translateX(221px);
	-o-transform:rotate(-240deg) translateX(221px);
	transform:rotate(-240deg) translateX(221px);
	-webkit-transform-origin:255px 34px;
	-moz-transform-origin:255px 34px;
	-ms-transform-origin:255px 34px;
	-o-transform-origin:255px 34px;
	transform-origin:255px 34px;
	text-indent:20px;
}
.circle-item:nth-child(6){
	-webkit-transform:translate(86px,280px) rotate(300deg);
	-moz-transform:translate(86px,280px) rotate(300deg);
	-ms-transform:translate(86px,280px) rotate(300deg);
	-o-transform:translate(86px,280px) rotate(300deg);
	transform:translate(86px,280px) rotate(300deg);
}
.circle-item:nth-child(6) .item-img{
	background-position:0 -350px;
	-webkit-transform:rotate(-300deg);
	-moz-transform:rotate(-300deg);
	-ms-transform:rotate(-300deg);
	-o-transform:rotate(-300deg);
	transform:rotate(-300deg);
}
.circle-item:nth-child(6).active .item-img{
	background-position:-80px -350px;
}
.circle-item:nth-child(6) .item-menu{
	-webkit-transform:rotate(-300deg) translateX(221px);
	-moz-transform:rotate(-300deg) translateX(221px);
	-ms-transform:rotate(-300deg) translateX(221px);
	-o-transform:rotate(-300deg) translateX(221px);
	transform:rotate(-300deg) translateX(221px);
	-webkit-transform-origin:255px 34px;
	-moz-transform-origin:255px 34px;
	-ms-transform-origin:255px 34px;
	-o-transform-origin:255px 34px;
	transform-origin:255px 34px;
	text-indent:20px;
}
.circle-hover-light{
	display: none;
	position: absolute;
	height:100%;
	width:100%;
	background: url(./images/bar-item-chosen.png) center center no-repeat;
	background-size:cover;
	-webkit-background-size: cover;
}
.circle-hover-light.active{
	display: block;
}
.compass{
	display: none;
	position: absolute;
	right:0px;
	top:0px;
	z-index:96;
	width:256px;
	height:256px;
	background: url(./images/compass-1.png) center center no-repeat;
	-webkit-background-size: cover;
	background-size: cover;
}
.compass .inner{
	width:100%;
	height:100%;
}
.plate{
	width:100%;
	height:100%;
	position: absolute;
	background:url(./images/compass-2.png) center center no-repeat;
	-webkit-background-size: cover;
	background-size: cover;
}
.pointer{
	width:100%;
	height:100%;
	position: absolute;
	background:url(./images/compass-4.png) center center no-repeat;
	-webkit-background-size: cover;
	background-size: cover;
}
.compass .plate p{
	display: block;
	position: absolute;
	height:100%;
	width:100%;
	background:url(./images/compass-3.png) center center no-repeat;
	-webkit-background-size: cover;
	background-size: cover;
	display: none;
}
.compass .pointer p{
	display: block;
	position: absolute;
	height:100%;
	width:100%;
	background:url(./images/compass-5.png) center center no-repeat;
	-webkit-background-size: cover;
	background-size: cover;
	display: none;
}
.compass:hover .plate p{
	display: block;
}
.compass:hover .pointer p{
	display: block;
}
@media screen and (max-width: 750px){
	.nav{
		width:98%;
		margin-left: 0;
		left:1%;
		height:45px;
	}
	.nav-item{
		display:inline-block;
		cursor:pointer;
		width:32px;
		height:32px;
		margin:6px 6px;
		background:url(./images/nav-icons-min.png) no-repeat;
		background-size:100px auto;
	}
	.nav-item-1{
		background-position:0 0;
	}
	.nav-item-2{
		background-position:0 -50px;
	}
	.nav-item-3{
		background-position:0 -100px;
	}
	.nav-item-4{
		background-position:0 -150px;
	}
	.nav-item-5{
		background-position:0 -200px;
	}
	.nav-item-6{
		background-position:0 -250px;
	}
	.nav-item-7{
		background-position:0 -300px;
	}
	.nav-item-8{
		background-position:0 -350px;
	}
	.nav-item-1.active{
		background-position:-50px 0;
	}
	.nav-item-2.active{
		background-position:-50px -50px;
	}
	.nav-item-3.active{
		background-position:-50px -100px;
	}
	.nav-item-4.active{
		background-position:-50px -150px;
	}
	.nav-item-5.active{
		background-position:-50px -200px;
	}
	.nav-item-6.active{
		background-position:-50px -250px;
	}
	.nav-item-7.active{
		background-position:-50px -300px;
	}
	.nav-item-8.active{
		background-position:-50px -350px;
	}
	.circle{
		position: absolute;
		left:50%;
		top:50%;
		width:220px;
		height:220px;
		background:url(./images/bar-bg.png) center center no-repeat;
		-webkit-background-size: cover;
		background-size: cover;
		-webkit-transform:translate(-50%,-50%);
		-moz-transform:translate(-50%,-50%);
		-o-transform:translate(-50%,-50%);
		-ms-transform:translate(-50%,-50%);
		transform:translate(-50%,-50%);
		display: none;
	}
	.circle-item{
		display:block;
		width:42px;
		height:42px;
		position: relative;
		z-index:99;
		border-radius:50%;
		background-color:#ccc;
		position: absolute;
		-webkit-transform-origin:64px -51px;
		-moz-transform-origin:64px -51px;
		-ms-transform-origin:64px -51px;
		-o-transform-origin:64px -51px;
		transform-origin:64px -51px;
	}
	.circle-item .item-img{
		position: absolute;
		left:0;
		top:0;
		z-index: 99;
		width:42px;
		height:42px;
		background: url(./images/bar-icons-min.png) no-repeat;
		cursor:pointer;
	}
	.circle-item .item-menu{
		width:181px;
		height:42px;
		line-height: 42px;
		text-align:center;
		color:#fff;
		font-size: 16px;
		background: url(./images/bar-menu-bg.png) center center no-repeat;
		-webkit-background-size: cover;
		background-size: cover;
		position: absolute;
		right:0;
		top:0;
		z-index:98;
		display: none;
	}
	.circle-item:nth-child(1){
		-webkit-transform:translate(46px,161px) rotate(0deg);
		-moz-transform:translate(46px,161px) rotate(0deg);
		-ms-transform:translate(46px,161px) rotate(0deg);
		-o-transform:translate(46px,161px) rotate(0deg);
		transform:translate(46px,161px) rotate(0deg);
	}
	.circle-item:nth-child(1) .item-img{
		background-position:0 0;
	}
	.circle-item:nth-child(1).active .item-img{
		background-position:-80px 0px;
	}
	.circle-item:nth-child(1) .item-menu{
		text-indent:-10px;
	}
	.circle-item:nth-child(2){
		-webkit-transform:translate(46px,163px) rotate(60deg);
		-moz-transform:translate(46px,163px) rotate(60deg);
		-ms-transform:translate(46px,163px) rotate(60deg);
		-o-transform:translate(46px,163px) rotate(60deg);
		transform:translate(46px,163px) rotate(60deg);
	}
	.circle-item:nth-child(2) .item-img{
		background-position:0 -70px;
		-webkit-transform:rotate(-60deg);
		-moz-transform:rotate(-60deg);
		-ms-transform:rotate(-60deg);
		-o-transform:rotate(-60deg);
		transform:rotate(-60deg);
	}
	.circle-item:nth-child(2).active .item-img{
		background-position:-80px -70px;
	}
	.circle-item:nth-child(2) .item-menu{
		-webkit-transform:rotate(-60deg);
		-moz-transform:rotate(-60deg);
		-ms-transform:rotate(-60deg);
		-o-transform:rotate(-60deg);
		transform:rotate(-60deg);
		-webkit-transform-origin:161px 21px;
		-moz-transform-origin:161px 21px;
		-ms-transform-origin:161px 21px;
		-o-transform-origin:161px 21px;
		transform-origin:161px 21px;
		text-indent:-10px;
	}
	.circle-item:nth-child(3){
		-webkit-transform:translate(46px,163px) rotate(120deg);
		-moz-transform:translate(46px,163px) rotate(120deg);
		-ms-transform:translate(46px,163px) rotate(120deg);
		-o-transform:translate(46px,163px) rotate(120deg);
		transform:translate(46px,163px) rotate(120deg);
	}
	.circle-item:nth-child(3) .item-img{
		background-position:0 -140px;
		-webkit-transform:rotate(-120deg);
		-moz-transform:rotate(-120deg);
		-ms-transform:rotate(-120deg);
		-o-transform:rotate(-120deg);
		transform:rotate(-120deg);
	}
	.circle-item:nth-child(3).active .item-img{
		background-position:-80px -140px;
	}
	.circle-item:nth-child(3) .item-menu{
		-webkit-transform:rotate(-120deg);
		-moz-transform:rotate(-120deg);
		-ms-transform:rotate(-120deg);
		-o-transform:rotate(-120deg);
		transform:rotate(-120deg);
		-webkit-transform-origin:161px 21px;
		-moz-transform-origin:161px 21px;
		-ms-transform-origin:161px 21px;
		-o-transform-origin:161px 21px;
		transform-origin:161px 21px;
		text-indent:-10px;
	}
	.circle-item:nth-child(4){
		-webkit-transform:translate(45px,161px) rotate(180deg);
		-moz-transform:translate(45px,161px) rotate(180deg);
		-ms-transform:translate(45px,161px) rotate(180deg);
		-o-transform:translate(45px,161px) rotate(180deg);
		transform:translate(45px,161px) rotate(180deg);
	}
	.circle-item:nth-child(4) .item-img{
		background-position:0 -210px;
		-webkit-transform:rotate(-180deg);
		-moz-transform:rotate(-180deg);
		-ms-transform:rotate(-180deg);
		-o-transform:rotate(-180deg);
		transform:rotate(-180deg);
	}
	.circle-item:nth-child(4).active .item-img{
		background-position:-80px -210px;
	}
	.circle-item:nth-child(4) .item-menu{
		-webkit-transform:rotate(-180deg);
		-moz-transform:rotate(-180deg);
		-ms-transform:rotate(-180deg);
		-o-transform:rotate(-180deg);
		transform:rotate(-180deg);
		text-indent:10px;
	}
	.circle-item:nth-child(5){
		-webkit-transform:translate(46px,160px) rotate(240deg);
		-moz-transform:translate(46px,160px) rotate(240deg);
		-ms-transform:translate(46px,160px) rotate(240deg);
		-o-transform:translate(46px,160px) rotate(240deg);
		transform:translate(46px,160px) rotate(240deg);
	}
	.circle-item:nth-child(5) .item-img{
		background-position:0 -280px;
		-webkit-transform:rotate(-240deg);
		-moz-transform:rotate(-240deg);
		-ms-transform:rotate(-240deg);
		-o-transform:rotate(-240deg);
		transform:rotate(-240deg);
	}
	.circle-item:nth-child(5).active .item-img{
		background-position:-80px -280px;
	}
	.circle-item:nth-child(5) .item-menu{
		-webkit-transform:rotate(-240deg) translateX(139px);
		-moz-transform:rotate(-240deg) translateX(139px);
		-ms-transform:rotate(-240deg) translateX(139px);
		-o-transform:rotate(-240deg) translateX(139px);
		transform:rotate(-240deg) translateX(139px);
		-webkit-transform-origin:161px 21px;
		-moz-transform-origin:161px 21px;
		-ms-transform-origin:161px 21px;
		-o-transform-origin:161px 21px;
		transform-origin:161px 21px;
		text-indent:10px;
	}
	.circle-item:nth-child(6){
		-webkit-transform:translate(47px,162px) rotate(300deg);
		-moz-transform:translate(47px,162px) rotate(300deg);
		-ms-transform:translate(47px,162px) rotate(300deg);
		-o-transform:translate(47px,162px) rotate(300deg);
		transform:translate(47px,162px) rotate(300deg);
	}
	.circle-item:nth-child(6) .item-img{
		background-position:0 -350px;
		-webkit-transform:rotate(-300deg);
		-moz-transform:rotate(-300deg);
		-ms-transform:rotate(-300deg);
		-o-transform:rotate(-300deg);
		transform:rotate(-300deg);
	}
	.circle-item:nth-child(6).active .item-img{
		background-position:-80px -350px;
	}
	.circle-item:nth-child(6) .item-menu{
		-webkit-transform:rotate(-300deg) translateX(139px);
		-moz-transform:rotate(-300deg) translateX(139px);
		-ms-transform:rotate(-300deg) translateX(139px);
		-o-transform:rotate(-300deg) translateX(139px);
		transform:rotate(-300deg) translateX(139px);
		-webkit-transform-origin:161px 21px;
		-moz-transform-origin:161px 21px;
		-ms-transform-origin:161px 21px;
		-o-transform-origin:161px 21px;
		transform-origin:161px 21px;
		text-indent:10px;
	}
	.compass{
		width:128px;
		height:128px;
	}
}
@media screen and (max-width: 375px){
	.nav-item{
		margin:6px 3px;
	}
}